<script setup>
import { nextTick } from 'vue';
import { reactive } from 'vue';
import { onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { ref } from 'vue';
const jd = ref(0)
const marginLeft = ref(0)

const router = useRouter()
const route = useRoute()
const isloading = ref(true)
onMounted(() => {
  nextTick(() => {
    const increment = () => {
      jd.value++
      if (jd.value <= 100) {
        // console.log(jd.value);
      } else {
        clearInterval(timer);
      }
    };
    const timer = setInterval(increment, 30);
    const incrementb = () => {
      marginLeft.value += 0.16
      if (marginLeft.value <= 17) {
        // console.log(marginLeft.value);
      } else {
        clearInterval(timerb);
        isloading.value = false

      }
    };
    const timerb = setInterval(incrementb, 30);
  })
})
function onstartgame() {
  let codeValue = route.query.code
  if (route.query.code) {
    router.push({ name: 'activity', query: { code: codeValue } })
  } else {
    router.push('activity')
  }

}
</script>
<template>
  <div class="loading w-full h-[100vh] relative flex justify-center items-end " v-if="isloading">
    <img class="w-[7.625rem] h-[4.1875rem] absolute top-[1.75rem] left-[1.9375rem] "
      src="../../assets/img/activityimg/mtlogo.png" alt="">
    <div class="  w-[20.75rem] flex flex-col mb-20">
      <img src="../../assets/img/activityimg/pangxie.gif" class="w-[5.5rem] h-[4.5rem] "
        :style="{ 'margin-left': marginLeft + 'rem' }" alt="">
      <div class="w-[20.75rem]">
        <van-progress color="rgb(243,194,61)" :show-pivot="false" :percentage="jd" stroke-width="8" />
      </div>
    </div>
  </div>
  <!-- 开启游戏 -->
  <div class="loading w-full h-[100vh] relative flex justify-end items-center flex-col" v-if="!isloading">
    <img class="w-[5rem] h-[2.75rem] absolute top-[1.75rem] left-[1.9375rem] "
      src="../../assets/img/activityimg/mtlogo.png" alt="">
      <!--  absolute top-[4.625rem] left-[1.3rem] -->
    <img src="../../assets/img/activityimg/slogan.png"
      class="w-[20.375rem] h-[11.4375rem] mb-[47vh] mr-1" alt="">
      <!-- absolute bottom-[3.25rem] left-[4.0625rem] -->
    <img src="../../assets/img/activityimg/startgame.png" @click="onstartgame()"
      class="w-[15.0625rem] h-[5.3125rem] mb-9" alt="">
  </div>
</template>

<style scoped>
.loading {
  background: url(../../assets/img/activityimg/loadingbg.png) no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
</style>